<template>
  <div class="photoInfo">
    <h4>{{photoInfo.title}}</h4>
    <p>
        <span class="time">发表时间: {{photoInfo.add_time | dateFormat}}</span>
        <span class="click">点击: {{photoInfo.click}}</span>
    </p>
    <hr>
    <ul class="thumimages">
        <li v-for="(item, index) in thumimages" :key="index" @click="showPreview">
            <img :src="item.src" alt="">
        </li>
    </ul>
    <div class="detail-content" v-html="photoInfo.content"></div>
    <van-image-preview v-model="show" :images="images" @change="onChange" >
        <template v-slot:index>{{ index }} / {{images.length}}</template>
    </van-image-preview>

    <my-comment></my-comment>
  </div>
</template>

<script>
import Comment from "../../components/Comment.vue";
export default {
    data() {
        return {
            photoInfo: {},
            thumimages: [],
            show: false,
            index: 1,
            images: [],
        }
    },
    mounted() {
        this.getimageInfo();
        this.getthumimages();
    },
    methods: {
        async getimageInfo() {
            const {data: res} = await this.$http.get('/api/getimageInfo/' + this.$route.params.id);
            this.photoInfo = res.message[0];
            // this.photoInfo.add_time = this.photoInfo.add_time.substr(0, 10);
        },
        async getthumimages() {
            const {data: res} = await this.$http.get('/api/getthumimages/' + this.$route.params.id);
            this.thumimages = res.message;
            this.thumimages.forEach(item => {
                this.images.push(item.src);
            });
        },
        showPreview() {
            this.show = true;
        },
        onChange(index) {
            this.index = index + 1;
        }
    },
    components: {
        "my-comment": Comment
    },
};
</script>

<style lang="less" scoped>
.photoInfo {
    padding: 0 10px 60px;
    overflow: hidden;

    h4 {
        text-align: center;
        color: #26a2ff;
        font-size: 15px;
    }
    p {
        overflow: hidden;
    }
    .time {
        float: left;
        font-size: 13px;
        color: #8f8f94;
    }
    .click {
        float: right;
        font-size: 13px;
        color: #8f8f94;
    }
    .thumimages {
        margin: 10px 0;
        overflow: hidden;
        li {
            float: left;
            width: 33.3333%;
            padding: 5px;
            box-sizing: border-box;
            img {
                width: 100%;
                box-shadow: 1px 0 8px 1px rgba(0,0,0,.3);
            }
        }
    }
    .detail-content {
        font-size: 14px;
        line-height: 24px;
    }
}
</style>